function createCloseBtn (arg) {
  let closeBtn = document.createElement('div')
  closeBtn.style.class = 'close-btn'
  closeBtn.style.width = '48px'
  closeBtn.style.height = '48px'
  closeBtn.style.lineHeight = '48px'
  closeBtn.style.textAlign = 'center'
  layout(arg, closeBtn)
  closeBtn.style.position = 'absolute'
  closeBtn.style.cursor = 'pointer'
  closeBtn.style.zIndex = '99999'
  closeBtn.style.color = '#fff'
  closeBtn.style.pointerEvents = 'auto'
  let icon = document.createElement('i')
  icon.className = 'el-icon-close'
  icon.style.fontSize = '24px'
  icon.style.lineHeight = '48px'
  icon.style.width = '100%'
  closeBtn.appendChild(icon)
  return closeBtn
}
function layout (arg, el) {
  if (el === null) {
    el = createCloseBtn(arg)
  }
  const direction = arg.direction
  const backgroundColor = arg.backgroundColor
  el.style.backgroundColor = backgroundColor || '#f56c6c'
  if (direction === 'btt') {
    // 从下往上开
    el.style.left = '50%'
    el.style.top = '-48px'
    el.style.bottom = null
    el.style.right = null
    el.style.borderRadius = '6px 6px 0 0'
  } else if (direction === 'ttb') {
    // 从上往下开
    el.style.right = '50%'
    el.style.bottom = '-48px'
    el.style.top = null
    el.style.left = null
    el.style.borderRadius = '0 0 6px 6px'
  } else if (direction === 'rtl') {
    // 从右往左开
    el.style.top = '50%'
    el.style.left = '-48px'
    el.style.right = null
    el.style.bottom = null
    el.style.borderRadius = '6px 0 0 6px'
  } else if (direction === 'ltr') {
    // 从左往右开
    el.style.bottom = '50%'
    el.style.right = '-48px'
    el.style.left = null
    el.style.top = null
    el.style.borderRadius = '0 6px 6px 0'
  }
}
export default {
  bind (el, binding, vnode) {
    let drawerEl = el.querySelector('.el-drawer')
    // drawerEl.style.position = 'fixed'
    drawerEl.style.overflow = 'visible'
    let closeBtn = createCloseBtn(binding.arg)
    // console.log('bind binding', binding)
    function close (e) {
      if (binding.expression) {
        binding.value(e)
      }
    }
    el.closeClick = close
    el.closeBtn = closeBtn
    closeBtn.addEventListener('click', close)
    drawerEl.appendChild(closeBtn)
  },
  inserted (el, binding) {
    // console.log('inserted binding', binding)
  },
  update (el, bingding, vnode, oldVnode) {
    // console.log('updated binding', binding, obinding)
  },
  componentUpdated (el, binding, vnode, oldVnode) {
    // console.log('componentUpdated binding', binding.arg)
    layout(binding.arg, el.closeBtn)
  },
  unbind (el, binding) {
    document.removeEventListener('click', el.closeClick)
    delete el.closeClick
  }
}
